<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { axiosrnewmedical } from '@/http/axiosRead';

interface GuideArticle {
  id: number;
  catId: number;
  categoryName: string;
  title: string;
  covering: string;
  viewCnt: number;
  createdAt: string;
}

const router = useRouter();
const route = useRoute();
const articles = ref<GuideArticle[]>([]);
const loading = ref(false);
const categoryId = ref(Number(route.params.categoryId));
const categoryName = ref(route.query.name as string || '分类');

// 获取文章列表
const getGuideArticles = async () => {
  try {
    loading.value = true;
    const response = await axiosrnewmedical.get('/Guide/articles', {
      params: { categoryId: categoryId.value }
    });
    
    if (response.data.code === 200) {
      articles.value = response.data.data;
    }
  } catch (error) {
    console.error('获取就医指南文章列表失败:', error);
  } finally {
    loading.value = false;
  }
};

// 跳转到文章详情
const goToArticleDetail = (articleId: number) => {
  router.push({ path: `/medical-guide/detail/${articleId}` });
};

// 返回分类列表
const goBack = () => {
  router.go(-1);
};

// 格式化日期
const formatDate = (dateStr: string) => {
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN');
};

onMounted(() => {
  getGuideArticles();
});
</script>

<template>
  <div class="guide-articles-container">
    <!-- 导航栏 -->
    <van-nav-bar 
      :title="categoryName" 
      left-arrow 
      @click-left="goBack" 
      fixed />
    
    <!-- 文章列表 -->
    <div class="articles-list">
      <van-loading v-if="loading" class="loading" size="24px">加载中...</van-loading>
      
      <van-empty v-else-if="articles.length === 0" description="暂无文章" />
      
      <div 
        v-else
        v-for="article in articles" 
        :key="article.id"
        class="article-item"
        @click="goToArticleDetail(article.id)">
        <div class="article-content">
          <div class="article-header">
            <h3 class="article-title">{{ article.title }}</h3>
            <van-icon name="arrow" class="arrow-icon" />
          </div>
          
          <div class="article-meta">
            <span class="meta-item">
              <van-icon name="eye-o" />
              {{ article.viewCnt || 0 }}次阅读
            </span>
            <span class="meta-item">
              <van-icon name="clock-o" />
              {{ formatDate(article.createdAt) }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.guide-articles-container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-top: 46px;
}

.articles-list {
  padding: 16px;
}

.loading {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.article-item {
  background-color: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.article-item:active {
  transform: scale(0.98);
  background-color: #f8f9fa;
}

.article-content {
  width: 100%;
}

.article-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.article-title {
  flex: 1;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin: 0;
  margin-right: 8px;
}

.arrow-icon {
  font-size: 16px;
  color: #999;
  margin-top: 2px;
}

.article-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #999;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-item .van-icon {
  font-size: 12px;
}
</style> 